<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <title>JavaScript Events</title>  
    <style type="text/css">
      p { width: 200px; }
    </style>
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->  
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript">
      $(document).ready(function() {
        $('#click-trigger').click(function() {
          alert('You triggered the click event');
          });
        $("p").mouseover(function () {
          alert('You triggered the mouseover event');
        });
      });       
    </script>
  </head>  
  <body>  
    <h1>JavaScript Events</h1> 
    <h2>Click events</h2>
    <button id="click-trigger">Click me</button>
    <h2>Mouseover events</h2>
    <p>Move your mouse over this paragraph</p>
  </body>  
</html>
